import React from 'react';
import {HeaderWrapper, Logo, Nav, NavItem, NavSearch, Addition, AdditionItem, RegButton, WriteButton, NavSearchWrapper, SearchIcon} from './style';
import {connect} from 'react-redux';
import logoImg from '../../assets/logo.png';
import {HeaderModel} from '../../interface';
import {actionsCreator} from '../../store';

const Header: React.FC<HeaderModel.Props> = (props: HeaderModel.Props) => {
    return (
        <HeaderWrapper>
            <div className="width-limit">
                <Logo>
                    <img src={logoImg} alt="logo" />
                </Logo>
                <Nav>
                    <NavItem className="active">首页</NavItem>
                    <NavItem>下载APP</NavItem>
                    <NavSearchWrapper className={props.headerReducer.focused ? 'focused' : ''}>
                        <NavSearch
                            onFocus={props.handleInputFocus}
                            onBlur={props.handleInputBlur}
                        />
                        <SearchIcon>
                            <svg className="icon search-icon" aria-hidden="true">
                                <use xlinkHref="#iconsearch"></use>
                            </svg>
                        </SearchIcon>
                    </NavSearchWrapper>
                </Nav>
                <Addition>
                    <AdditionItem>
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref="#iconAa"></use>
                        </svg>
                    </AdditionItem>
                    <AdditionItem>beta</AdditionItem>
                    <AdditionItem>登录</AdditionItem>
                    <RegButton>注册</RegButton>
                    <WriteButton>
                        <svg className="icon" aria-hidden="true">
                            <use xlinkHref="#iconquill"></use>
                        </svg>
                        写文章
                        </WriteButton>
                </Addition>
            </div>
        </HeaderWrapper>
    )
}

const mapStateToProps = (state: HeaderModel.Props) => {
    // console.log(state);

    return state;
}

const mapDispatchToProps = (dispatch: any) => {
    return {
        handleInputFocus() {
            dispatch(actionsCreator.searchFocusAction());
        },
        handleInputBlur() {
            dispatch(actionsCreator.searchBlurAction());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header)